<template>
  <div class="app-container">
    <el-form :rules="rules" ref="form" :model="unit" label-width="80px">
      <el-form-item label="单位名称" prop="unitName">
        <el-input v-model="unit.unitName"></el-input>
      </el-form-item>

      <el-form-item label="单位类型" prop="unitType">
        <template>
          <el-select v-model="unit.unitType" clearable placeholder="请选择">
            <el-option
              v-for="item in listType"
              :key="item.id"
              :label="item.text"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
      </el-form-item>

      <el-form-item  label="选择地址" prop="address">
        <template>
          <v-distpicker
            @selected="show_modal"
          >
          </v-distpicker>
        </template>
      </el-form-item>

      <el-form-item
        label="电话"
        prop="tel"
      >
        <el-input v-model="unit.tel"></el-input>
      </el-form-item>

      <el-form-item label="联系人" prop="contacts">
        <el-input v-model="unit.contacts"></el-input>
      </el-form-item>

      <el-form-item label="备注" prop="remarks">
        <el-input v-model="unit.remarks"></el-input>
      </el-form-item>

      <el-form-item label="状态" prop="isdisable">
        <template>
          <el-radio v-model="unit.isdisable" :label="1">启用</el-radio>
          <el-radio v-model="unit.isdisable" :label="0">禁用</el-radio>
        </template>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          :disabled="saveBtnDisabled"
          @click="saveOrUpdate()"
        >保存单位
        </el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import unitApi from "@/api/unit.js"
  import VDistpicker from 'v-distpicker'

  export default {
    name: "add",
    components: {VDistpicker},
    data() {
      return {
        listType: {},
        unit: {
          unitName: "",
          unitType: "",
          address: "",
          tel: "",
          contacts: "",
          remarks: "",
          isdisable: ""
        },
        rules: {
          tel: [
            {required: true, message: '请输入电话号码', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11', trigger: 'blur'}
          ],
          unitName: [
            {required: true, message: '请输入单位名称', trigger: 'blur'}
          ],
          unitType: [
            {required: true, message: '请选择单位类型', trigger: 'change'}
          ],
          address: [
            {required: true, message: '请输入地址', trigger: 'blur'}
          ],
          contacts: [
            {required: true, message: '请输入联系人', trigger: 'blur'}
          ],
          remarks: [
            {required: true, message: '请输入备注', trigger: 'blur'}
          ],
          isdisable: [
            {required: true, message: '请选择状态', trigger: 'change'}
          ]
        }
      }
    },

    created() {
      this.init()
      this.findOne()
    },
    watch: {
      $route(to, from) {
        this.init()
      }
    },
    methods: {
      init() {
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id;
          this.findUnit(id)
        } else {
          this.unit = {}
        }
      },
      saveOrUpdate() {
        if (!this.unit.id) {
          this.saveUnit()
        } else {
          this.updateUnit()
        }
      },
      saveUnit() {
        unitApi.saveUnit(this.unit).then(response => {
          this.$message({
            message: "添加成功",
            type: "success"
          })
          this.$router.push({path: "/basic_setting/unitlist"})
        })
      },
      findUnit(id) {
        unitApi.findUnitById(id).then(response => {
          this.unit = response.data.unit
        })
      },
      updateUnit() {
        unitApi.updateUnitById(this.unit).then(response => {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.$router.push({path: "/basic_setting/unitlist"});
        })
      },
      findOne() {
        unitApi.findOne().then(response => {
          this.listType = response.data.dictionaryList
        })
      },
      show_modal(data) {
        this.unit.address = data.province.value + ' ' + data.city.value + ' ' + data.area.value
        console.log(this.unit.address)
      }
    }
  }
</script>

<style scoped>


</style>
